<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            position: absolute;
            left: 20px;bottom: 20px;
        }

        span{border-radius: 50%;position: absolute;left: 0;top:0;}

        input{position: relative;z-index: 2;}
    </style>
</head>
<body>
    <div id="box"></div>
    <input type="button" value="+" id="add">
    <input type="button" value="-" id="diff">
    <input type="color" id="color">
</body>
<script>

    var obox = document.getElementById("box");

    // 5. 假设初始宽高和颜色值
    var w = h = 10;
    var c = "black";

    // 1. 页面添加移动事件
    document.onmousemove = function(eve){
        // 2. 处理事件对象的兼容，获取相对于页面的坐标，显示在容器内
        var e = eve || window.event;
        obox.innerHTML = e.pageX + ", " + e.pageY;

        // 3. 不断的创建span，插入到页面
        var span = document.createElement("span");
        document.body.appendChild(span);
        // 4. span的位置设置成鼠标的坐标
        span.style.left = e.pageX + "px";
        span.style.top = e.pageY + "px";
        // 6. 设置初始宽高和颜色
        span.style.width = w + "px";
        span.style.height = h + "px";
        span.style.background = c;
    }

    var oadd = document.getElementById("add");
    var odiff = document.getElementById("diff");
    var ocolor = document.getElementById("color");

    // 点击增加按钮，增加高宽的变量值
    oadd.onclick = function(){
        w += 5;
        h += 5;
    }

    // 点击减少按钮，减少宽高的变量值
    odiff.onclick = function(){
        // 减少时，要设置临界值
        if(w <= 5){
            w=h=5;
        }else{
            w -= 5;
            h -= 5;
        }
    }

    // 修改颜色时，设置颜色变量的值（注意合适的事件）
    ocolor.onchange = function(){
        // console.log(this.value);
        c = this.value;
    }

    // ocolor.oninput = function(){
    //     console.log(this.value);
    // }

</script>
</html>